<template>
	<div id="songPl">
		<button class="back_btn" @click="gdBack">
			<i class="iconfont icon-fanhui"></i>
		</button>
		<div class="hotPl">
			<p class="hotPlTop" v-if="hotComments">精彩评论</p>
		</div>
		<div class="hotContent cf"  v-for="h in hotComments">
			<div class="userImg cf">
				<img :src="h.user.avatarUrl"/>
			</div>
			<div class="usermsg">
				<p class="userName">{{h.user.nickname}}</p>
				<p class="time">{{format(h.time)}}</p>
			</div>
			<div class="Dz">
				<span>{{h.likedCount}}</span>
				<i class="iconfont icon-dianzan zan"></i>
			</div>
			<div class="content">
				{{h.content}}
			</div>
		</div>
		<div class="newPl">
			<p class="newTop">最新评论</p>
		</div>
		
		
		<div class="hotContent cf"  v-for="c in comments">
			<div class="userImg cf">
				<img :src="c.user.avatarUrl"/>
			</div>
			<div class="usermsg">
				<p class="userName">{{c.user.nickname}}</p>
				<p class="time">{{format(c.time)}}</p>
			</div>
			<div class="Dz">
				<span>{{c.likedCount}}</span>
				<i class="iconfont icon-dianzan zan"></i>
			</div>
			<div class="content">
				{{c.content}}
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	export default{
		beforeMount(){
			var id=this.$store.state.msg;
			axios.get("https://netease.bluej.cn/comment/music?timestamp=13&limit=20&id="+id).then((res)=>{
				console.log(res);
				this.hotComments = res.data.hotComments;
				console.log(this.hotComments);
				this.comments = res.data.comments;
				console.log(this.comments);
			})
		},
		data(){
			return{
				hotComments:[],
				comments:[]

			}
		},
		methods:{
			gdBack(){
				this.$router.go(-1);
				console.log(this);
			},
			format(time){
				//格式化时间
				var d = new Date(time);
				var year = d.getFullYear();
				var month = d.getMonth()+1;
				var dat = d.getDate();
				return year+"年"+month+"月"+dat+"日";
			},
		}
	}
</script>

<style lang="scss">
	#songPl{
		padding-top: 50px;
		.back_btn{
			position: absolute;
			z-index: 10;
			background: none;
			outline: none;
			border: none;
			top:10px;
			left:20px;
			
			i{
				font-size: 30px;
				color: #D43C33;
			}
		}
		.hotPl{
			.hotPlTop{
				text-align: left;
				color: white;
				background: #343435;
				line-height: 30px;
				padding-left: 10px;
				
			}
		}
		.newPl{
			margin-top: 10px;
			.newTop{
				text-align: left;
				color: white;
				background: #343435;
				line-height: 30px;
				padding-left: 10px;
				
			}
		}
		.hotContent{
			position: relative;
			.userImg{
				margin: 10px;
				display: inline-block;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				overflow: hidden;
				float: left;
				img{
					width: 100%;
					
				}
			}
			.hotPlContent{
				text-align: left;
				color: white;
			}
			.usermsg{
				text-align: left;
				.userName{
					padding-top:9px;
					font-size: 14px;
					letter-spacing: 1px;
					text-indent: 7px;
					color: white;
				}
				.time{
					font-size: 11px;
					text-indent: 7px;
					color: #bababb;
				}
			}
			.Dz{
				position: absolute;
				right: 5%;
				top: 10px;
				span{
					color:#bababb;
					font-size: 11px;
				}
				.zan{
				color: #D43C33;
				font-size: 21px;
				
				}
			}
			.content{
				color: white;
				text-align: left;
				margin: 20px 25px 0 67px;
				padding: 0 0 20px 0;
				font-size: 15px;
				border-bottom:1px solid #bababb;
			}
			
			
		}
	}
</style>